<script setup lang="ts">
import { updateUser } from '@/api/system/user';
import { getDriveCarList, DriveCarListQuery, DriverCarVo } from '@/api/wuliu';
import { WaresDocVo } from '@/api/wuliu/wares/types';
import AreaSelector from '@/components/AreaSelector/AreaSelector.vue';
import { Refresh } from '@element-plus/icons-vue';
import { exportWares } from '@/api/wuliu/wares';
import { DrivecarForm, DrivecarQuery, DrivecarVO } from '@/api/wuliu/drivecar/types';

const loading = ref(false);
const listQuery = reactive<DriveCarListQuery>({ pageNum: 1, pageSize: 10, carName: undefined });
const listData = ref<DriverCarVo[]>([]);

async function getCustomData() {
  try {
    loading.value = true;

    const { rows } = await getDriveCarList(listQuery);
    listData.value = rows;
    console.log('cai wu guan li list', rows);
  } catch (error) {
    console.error('Error get cai wu guan li list', error);
  } finally {
    loading.value = false;
  }
}
watch(listQuery, getCustomData, { immediate: true });

const requesting = ref(false);
const modifyItem = ref<DriverCarVo>();

function beforeModifyClose() {
  return !requesting.value;
}

async function handleUpdateItem() {
  const item = toRaw(modifyItem.value);

  if (!item) {
    return;
  }

  try {
    requesting.value = true;
    const { userId, userName, vipPrice } = item;
    await updateUser({ userId, userName, vipPrice });
    console.log('update custom', item);
  } catch (error) {
    console.error('Error update custom', error);
  } finally {
    requesting.value = false;
    handleCloseModifyPaidAmount();
    getCustomData();
  }
}

const modifyPaidAmountVisible = ref(false);

function handleOpenModifyPaidAmount(item: WaresDocVo) {
  modifyItem.value = { ...toRaw(item) };
  modifyPaidAmountVisible.value = true;
}

function handleCloseModifyPaidAmount() {
  modifyPaidAmountVisible.value = false;
}

//计算利润
function handlerProfit(row) {
  return row.priceSum - row.oilfeePrice - row.oilfeePrice - row.peoplePrice;
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const drivecarList = ref<DrivecarVO[]>([]);
const buttonLoading = ref(false);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const drivecarFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: DrivecarForm = {
  id: undefined,
  driverId: undefined,
  driverName: undefined,
  remark: undefined,
  carId: undefined,
  carName: undefined,
  priceSum: undefined,
  customSum: undefined,
  dispatchCarId: undefined,
  dispatchCarName: undefined,
  dispatchCarTime: undefined,
  oilfeePrice: undefined,
  peoplePrice: undefined,
  roadPrice: undefined
}
const data = reactive<PageData<DrivecarForm, DrivecarQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    driverId: undefined,
    driverName: undefined,
    carId: undefined,
    carName: undefined,
    priceSum: undefined,
    customSum: undefined,
    dispatchCarId: undefined,
    dispatchCarName: undefined,
    dispatchCarTime: undefined,
    oilfeePrice: undefined,
    peoplePrice: undefined,
    roadPrice: undefined,
    params: {
    }
  },
  rules: {

  }
});
const { queryParams, form, rules } = toRefs(data);

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('wuliu/drivecar/export', {
    ...queryParams.value
  }, `drivecar_${new Date().getTime()}.xlsx`)
}
</script>

<template>
  <div class="app-container cai-wu-guan-li">
    <div class="header">
      <div class="header-filter">
        <el-form ref="queryFormRef" :model="listQuery" :disabled="loading" :inline="true">
          <el-form-item label="车辆" prop="bdrmc">
            <el-input v-model="listQuery.carName" />
          </el-form-item>
        </el-form>
      </div>

      <div class="header-actions">
        <el-tooltip content="刷新">
          <el-button :icon="Refresh" circle @click="getCustomData" />
        </el-tooltip>
      </div>
    </div>

    <el-table v-loading="loading" :data="listData" stripe>
      <el-table-column label="日期" prop="dispatchCarTime" />
      <el-table-column label="车辆" prop="carName" />
      <el-table-column label="总件数" prop="customSum">
        <template #default="{ row }"> {{ row.customSum || 0 }}件 </template>
      </el-table-column>
      <el-table-column label="油费">
        <template #default="{ row }"> ￥{{ row.oilfeePrice || 0 }} </template>
      </el-table-column>
      <el-table-column label="过路费">
        <template #default="{ row }"> ￥{{ row.oilfeePrice || 0 }} </template>
      </el-table-column>
      <el-table-column label="人工费">
        <template #default="{ row }"> ￥{{ row.peoplePrice || 0 }} </template>
      </el-table-column>
      <el-table-column label="总运费">
        <template #default="{ row }"> ￥{{ row.priceSum || 0 }} </template>
      </el-table-column>
      <el-table-column label="毛利润">
        <template #default="{ row }"> ￥{{ handlerProfit(row) }} </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" text @click="handleExport(row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="modifyPaidAmountVisible" title="修改客户单价" width="300" :before-close="beforeModifyClose">
      <el-input-number v-model="modifyItem.vipPrice" :min="0" :precision="2" />
      <template #footer>
        <div class="dialog-footer">
          <el-button :disabled="requesting" @click="handleCloseModifyPaidAmount">取消</el-button>
          <el-button :loading="requesting" :disabled="requesting" type="primary" @click="handleUpdateItem">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.cai-wu-guan-li {
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .header-filter {
      flex: 1 0 0;
    }

    .header-actions {
      flex: 0 0 auto;
    }
  }
}
</style>
